$(function () {
	$('.maskBtn').click(function () {
		let index = $(this).attr('data-index')
		$('.mask-wrap').show()
		if (index == 0) {
			$('.mask-wrap').html(`<div class="mask-position">
				<div class="mask-content">
					<div class="mask-title">
						<h4>外协费</h4>
						<img src="assets/images/mask/close.png">
					</div>
					<div class="mask-scroll">
						<div class="info">
							<div class="box btype">
								<h5>主要往来单位</h5>
								<div class="items">
									<div class="item">
										<p>北京康业管理咨询有限公司北京康业管理咨询有限公司北京康业管理咨询有限公司</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>北京康业管理咨询有限公司</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>北京康业管理咨询有限公司北京康业管理咨询有限公司北京康业管理咨询有限公司</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>北京康业管理咨询有限公司</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>北京康业管理咨询有限公司</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
								</div>
							</div>
							<div class="box else">
								<h5>主要课题</h5>
								<div class="items">
									<div class="item">
										<p>课题1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>课题1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>课题1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>课题1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>课题1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>课题1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
								</div>
							</div>
							<div class="box else">
								<h5>部门支出</h5>
								<div class="items">
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
								</div>
							</div>
						</div>
						<div class="monthly">
							<h5>月度支出</h5>
							<div class="chart" id="waixie_chart"></div>
						</div>
					</div>
				</div>
			</div>`)
			waixie()
		} else if (index == 1) {
			$('.mask-wrap').html(`<div class="mask-position">
				<div class="mask-content">
					<div class="mask-title">
						<h4>材料费</h4>
						<img src="assets/images/mask/close.png">
					</div>
					<div class="mask-scroll">
						<div class="info">
							<div class="box else">
								<h5>材料类别支出</h5>
								<div class="items">
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
								</div>
							</div>
							<div class="box else">
								<h5>部门支出</h5>
								<div class="items">
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
								</div>
							</div>
						</div>
						<div class="monthly">
							<h5>月度支出</h5>
							<div class="chart" id="cailiao_chart"></div>
						</div>
					</div>
				</div>
			</div>`)
			$('.mask-wrap').show()
			cailiao()
		} else if (index == 2) {
			$('.mask-wrap').html(`<div class="mask-position">
				<div class="mask-content">
					<div class="mask-title">
						<h4>工资</h4>
						<img src="assets/images/mask/close.png">
					</div>
					<div class="mask-scroll">
						<div class="info">
							<div class="box else">
								<h5>人员类别薪酬分布</h5>
								<div class="items">
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>类别1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
								</div>
							</div>
							<div class="box else">
								<h5>薪酬类别分布</h5>
								<div class="items">
									<div class="item">
										<p>基本工资</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>五险一金</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>专项绩效</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>季度绩效</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>奖励</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
								</div>
							</div>
							<div class="box else">
								<h5>部门薪酬</h5>
								<div class="items">
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
									<div class="item">
										<p>部门1</p>
										<h4>2,000.000<span>万元</span></h4>
									</div>
								</div>
							</div>
						</div>
						<div class="monthly">
							<h5>月度薪酬</h5>
							<div class="chart" id="gongzi_chart"></div>
						</div>
					</div>
				</div>`)
			$('.mask-wrap').show()
			gongzi()
		}
	})

	// $('.mask-wrap').on('click', '.mask-position', function () {
	// 	$('.mask-wrap').hide()
	// 	$('.mask-wrap').html('')
	// })
	$('.mask-wrap').on('click', '.mask-title img', function () {
		for(const par of $('.mask-wrap')){
			if(par.id !== 'editMask' &&  $(this).parents('.mask-wrap')[0].id !== 'editMask'){
				$(par).hide()
			}
		}
		// $('.mask-wrap').html('')
	})
	
	
	$('#editMask .mask-title img').click(function(){
		$('#editMask').hide()
	})
	$('.edit').click(function(){
		$('.mask-wrap .mask-write-area textarea').val($('#rateMask .mask-scroll .state p').text())
		$('#editMask').show()
	})
	$('.mask-wrap .btn button.cancle').click(function(){
		$('#editMask').hide()
	})
	// $('.mask-wrap').on('click', '.mask-content', function (event) {
	// 	event.stopPropagation();
	// })

})
// 外协费月度支出
function waixie(key) {
	const currYear = localStorage.getItem("year");
	$.get(
		`${API_URL}getdata?budgetYear=${currYear}&status=2&chartNo=3&key01=${key}&chartPage=201`, {},
		function(res) {
			let re = eval("(" + res + ")");
			re = re.items[0].charts[0].data;
			let data =[];
			for(let i=0;i<re.length;i++){
				data.push([re[i].key02,re[i].key04])
			}
			console.log(data)
			monthly_chart('waixie_chart', data, '支出')
		})
	// let data = [
	// 	[1, 2333],
	// 	[2, 2333],
	// 	[3, 233323],
	// 	[4, 4333],
	// 	[5, 24533],
	// 	[6, 24333],
	// 	[7, 7553],
	// 	[8, 7433],
	// 	[9, 23],
	// 	[10, 26433],
	// 	[11, 433],
	// 	[12, 6733],
	// ]
}

// 材料费月度支出
function cailiao(key) {
	const currYear = localStorage.getItem("year");
	$.get(
		`${API_URL}getdata?budgetYear=${currYear}&status=2&chartNo=3&key01=${key}&chartPage=201`, {},
		function(res) {
			let re = eval("(" + res + ")");
			re = re.items[0].charts[0].data;
			let data =[];
			for(let i=0;i<re.length;i++){
				data.push([re[i].key02,re[i].key04])
			}
			console.log(data)
			monthly_chart('cailiao_chart', data, '支出')
		})
	// let data = [
	// 	[1, 6333],
	// 	[2, 53863],
	// 	[3, 26323],
	// 	[4, 4333],
	// 	[5, 24533],
	// 	[6, 24333],
	// 	[7, 75653],
	// 	[8, 733],
	// 	[9, 23],
	// 	[10, 9633],
	// 	[11, 433],
	// 	[12, 6733],
	// ]
	
}
// 工资月度薪酬
function gongzi(key) {
	const currYear = localStorage.getItem("year");
	$.get(
		`${API_URL}getdata?budgetYear=${currYear}&status=2&chartNo=3&key01=${key}&chartPage=201`, {},
		function(res) {
			let re = eval("(" + res + ")");
			re = re.items[0].charts[0].data;
			let data =[];
			for(let i=0;i<re.length;i++){
				data.push([re[i].key02,re[i].key04])
			}
			console.log(data)
			monthly_chart('gongzi_chart', data, '薪酬')
		})
	// let data = [
	// 	[1, 676543],
	// 	[2, 5453],
	// 	[3, 263435],
	// 	[4, 43337],
	// 	[5, 24533],
	// 	[6, 248763],
	// 	[7, 75543],
	// 	[8, 733],
	// 	[9, 631434],
	// 	[10, 95333],
	// 	[11, 4376],
	// 	[12, 6733],
	// ]
	
}

function monthly_chart(id, data, name) {
	let chart = echarts.init(document.getElementById(id));
	let option = {
		title: {
			text: '万元',
			textStyle: {
				color: '#86909C',
				fontSize: 12,
				fontWeight: 'normal'
			},
			padding: [25, 0, 0, 20],
		},
		legend: {
			show: false,
		},
		grid: {
			left: 0,
			top: 60,
			bottom: 0,
			right: 0,
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: data.map(function (item) {
				return item[0];
			}),
			splitLine: {
				show: false
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#E5E6EB',
				}
			},
			axisLabel: {
				fontSize: 12,
				color: '#86909C'
			},
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				fontSize: 12,
				color: '#86909C'
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#E5E6EB',
					type: 'dashed'
				}
			},
			axisLine: {
				show: false
			},
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'transparent',
			borderWidth: 0,
			padding: 0,
			formatter: function (params) {
				let result =
					`<div style="width:180px;padding: 8px;
				border-radius: 6px;
				border:1px solid #FFFFFF ;
				box-shadow: 0 2px 5px 1px rgba(199, 211, 233, 0.83);
				background: -moz-linear-gradient(top, #F4F7FC 0%, #ffffff 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F7FC), color-stop(100%,#ffffff));
				background: -webkit-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
				background: -o-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
				background: -ms-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
				background: linear-gradient(to bottom, #F4F7FC 0%,#ffffff 100%);"><p style="color: #1D2129;font-size: 12px;font-weight: 600;">${params[0].name}月</p>`;
				params.forEach(function (item) {
					result += `
							<div style="display: flex; flex-direction: row;justify-content: space-between;
							background: #FFFFFF;border-radius: 4px;box-shadow: 6px 0 20px 1px rgba(34, 87, 188, 0.1);padding:6px 8px; margin-top: 4px;" >
								<div style="display: flex; flex-direction: row;align-items: center;">
									${item.marker}
									<p style="color: #4E5969;font-size: 12px;">${item.seriesName}</p>
								</div>
								<div class="">
									<h4 style="color: #1D2129;font-size: 14px;font-weight: 600;display: flex; flex-direction: row;align-items: center;">${item.value}<span style="color: #86909C;font-size: 12px;font-weight: normal;"> 万元</span></h4>
								</div>
							</div>
						`
				})
				result += `</div>`
				return result;
			}
		},
		series: [{
			name: name,
			type: 'line',
			data: data.map(function (item) {
				return item[1];
			}),
			smooth: true, // 平滑曲线
			showSymbol: false,
			itemStyle: {
				color: '#165DFF'
			},
			lineStyle: {
				width: 3,
				color: '#165DFF'
			},
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'rgba(22, 93, 255, 0.2)' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(22, 93, 255, 0)' // 100% 处的颜色
					}],
					global: false // 缺省为 false
				}
			},
		}],
	}
	chart.setOption(option);
	window.addEventListener('resize', function () {
		chart.resize()
	})
	$('div').resize(function () {
		chart.resize()
	})
}